<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>测试数据</title>
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0; padding:0; }
body{ background:#fff url(../title.png) no-repeat 25% 20px; }
.container{ width:600px; height:400px; margin:100px auto 0px auto; border:10px solid #333; -moz-box-shadow:1px 1px 12px #000; -webkit-box-shadow:1px 1px 12px #000; box-shadow:1px 1px 12px #000; }
a.back{ width:184px; height:32px; position:absolute; bottom:10px; left:10px; background:transparent url(../back.png) no-repeat top left; }
.wrap{ width:200px; height:200px; margin:0px; overflow:hidden; position:relative; float:left; }
.wrap a img  { border:none; position:absolute;   top:-66.5px; left:-150px; height:500px; opacity: 0.5; -moz-opacity: 0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } 
</style>
</head>
<body>
<div id="container" class="container">
	<div class="wrap">
		<a href="javascript:;">
			<img src="img/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	<div class="wrap">
		<a href="javascript:;">
			<img src="img/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	<div class="wrap">
		<a href="javascript:;">
			<img src="img/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	<div class="wrap">
		<a href="javascript:;">
			<img src="img/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	<div class="wrap">
		<a href="javascript:;">
			<img src="img/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
	<div class="wrap">
		<a href="javascript:;">
			<img src="img/image1.jpg" alt="Picture 1"/>
		</a>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
		$('#container img').hover(
			function(){
				$(this).stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
			},
			function(){
				$(this).stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
			}
		);
});
</script>
